{% stylesheet %}
.collection_product {
  display: grid;
  grid-template-columns: repeat(var(--pc_number), 1fr);
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .collection_product {
    grid-template-columns: repeat(var(--wap_number), 1fr);
    grid-row-gap: 15px;
    grid-column-gap: 15px;
  }
}

.block_collection_more {
  margin-top: calc(var(--general_layout_spacing) * 0.5);
  text-align: center;
}

.block_collection_more a {
  margin: 0;
}

{% endstylesheet %}
<div class="container-wrapper animation-init" data-animation="animation-move-bottom">
  {% include 'title',title:section.settings.title,detail:section.settings.detail %}

  <div class="collection_product" style="--pc_number:{{section.settings.pc_number}};--wap_number:{{section.settings.wap_number}}">
    {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
    {%- if products.size > 0 -%}
    {% for product in products %}
    {% include "collection_list_product", product:product %}
    {% endfor %}
    {%- else -%}
    {%- for i in (1..8) -%}
    {% include "collection_list_product" %}
    {%- endfor -%}
    {%- endif -%}
  </div>

  {% if section.settings.more_text !='' %}
  <div class="block_collection_more"><a class="secondary_btn" href="/collections">{{ section.settings.more_text }}</a></div>
  {% endif %}
</div>
{% schema %}
{
	"tag": "",
	"class": "block_collection_list",
	"icon": "icon-zhuanjishangpin",
	"is_global": false,
	"name": {
		"zh_CN": "专辑商品"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "产品总数量"
			},
			"id": "product_number",
			"default": "8"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "4"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量"
			},
			"id": "wap_number",
			"max": "2",
			"min": "1"
		},
		{
			"type": "card_input",
			"id": "more_text",
			"label": {
				"zh_CN": "查看更多文案"
			}
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"title": "Editor Picks",
			"detail": "Irony vape green juice pop-up pork belly, kitsch shabby chic. Williamsburg letterpress 90’s.",
			"product_number": "8",
			"pc_number": "4",
			"wap_number": "2",
			"more_text": "View More"
		},
		"blocks": []
	}
}
{% endschema %}